<template>
  <div class="block" style="margin: 20px;">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      style="margin-top: 20px;"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="角色" prop="role_name">
        <el-input v-model="ruleForm.role_name" />
      </el-form-item>

      <el-form-item label="权限菜单">
        <el-tree
          ref="tree"
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          show-checkbox
          :default-checked-keys="treearray"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>

          </span>
        </el-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="add">确认</el-button>

      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import {
  Loading
} from 'element-ui'
const id = 1000
export default {
  name: 'RoleAddEdit',
  props: ['id'], // 接收ID
  data() {
    const data = []// 树结构

    return {
      valueselect: '',
      treearray: [], // 已选中数据
      loading: false, // loading
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
      ruleForm: {
        khname: '',
        khdq: '',
        khtel: '',
        khid: '',
        images: '',
        role_name: '', // 名称
        path: '', // 名称1以及是存目录，2级是存目录+文件名称
        component: '', // 名称 整个路径menu/menu-list
        parent_id: this.id, // 父ID，默认就是0
        hiddens: 1, // 是否隐藏,0是真，1是假
        props: 1, // 0是接收1不做处理
        icon: ''// 小图标管理
      }, rules: {
        name: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        }]
      }

    }
  },
  // 监听
  watch: {

  },
  // 加载界面的时候执行
  created() {
    this.getlist()
  },
  // 传值过来获取ID
  mounted() {
    if (this.id) {
      if (this.id != 0) {
        this.$store.dispatch('role/getid', { role_id: this.id })
          .then(res => {
            if (res.code == 0) {
              this.ruleForm.role_name = res.data.role_name
              this.treearray = res.dataarray
            } else {
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
          })
      }
    }
  },
  // 我是事件 类似点击的时候需要我
  methods: {
    append(data) {
      this.$router.push('/menu/menu-add/' + data.id)
    },
    edit(node, data) {
      this.$router.push('/menu/menu-edit/' + data.id)
    },
    remove(node, data) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('menu/deletes', { menu_id: data.id })
          .then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getlist()// 删除成功了就刷新
            } else {
              this.loading = false
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
            this.loading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }, // 查询列表信息
    getlist() {
      // console.log('点击了查询按钮')

      this.$store.dispatch('menu/getquery', {})
        .then(res => {
          if (res.code == 0) {
            this.data = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    },
    add() {
      this.treearray = this.$refs.tree.getCheckedKeys()
      console.log(this.ruleForm.role_name, this.treearray)
      this.loading = true

      if (this.id == 0) {
        this.$store.dispatch('role/add', { treearray: this.treearray, role_name: this.ruleForm.role_name })
          .then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: res.msg,
                onClose: () => {
                  this.$router.back()
                }
              })
              this.loading = false
            } else {
              this.loading = false
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
            this.loading = false
          })
      } else {
        this.$store.dispatch('role/edits', { treearray: this.treearray, role_name: this.ruleForm.role_name, role_id: this.id })
          .then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: res.msg,
                onClose: () => {
                  this.$router.back()
                }
              })
              this.loading = false
            } else {
              this.loading = false
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
            this.loading = false
          })
      }
    },
    editsbj() {

    }

  }
}
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
